<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Odd One Out Game</title>
    <!-- <script src="https://cdn.socket.io/socket.io-3.0.0.js"></script> -->
    <!-- <script src="/socket.io/socket.io.js"></script> -->
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&family=Roboto&display=swap" rel="stylesheet">
    <script src="https://cdn.socket.io/4.4.1/socket.io.min.js" integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H" crossorigin="anonymous"></script>
    <script src="app.js" defer></script>
</head>

<!-- <div id="update-content"> -->

<body style="margin: 0 8%;">

    <nav role="navigation">
    <div id="menuToggle">
        <!--
        A fake / hidden checkbox is used as click reciever,
        so you can use the :checked selector on it.
        -->
        <input class="hamburger-input" id="hamburger-button" type="checkbox" onclick="displayNavMenu()"/>
        
        <!--
        Some spans to act as a hamburger.
        
        They are acting like a real hamburger,
        not that McDonalds stuff.
        -->
        <span></span>
        <span></span>
        <span></span>

        <ul id="menu">
            <!-- <button id="how-to-play-button">How to play</button> -->
            <button id="how-to-play-button" class="button-class"><li>How to play</li></button>
            <div id="how-to-instructions">
                <ol id="instructions-list">
                    <p>1. Gather 3+ players and create a room.  <br>
                    2. One player is the imposter. <br>
                    3. Players ask each other questions.<br>
                    4. Goal: Identify the imposter. <br>
                    5. Vote for who you think the imposter is. </p>

                    <p id="close-instructions-text">Press this button again to close instructions</p>
                </ol>
            </div>

            <div id="chat-room">
                <h2>Chat Room</h2>
                <input id="chat-message" class="input-fields">
                <button id="send-chat-message" class="button-class">Send</button>
                <ul id="chat-messages"></ul>
            </div>
        <!-- <a><li>Home</li></a> -->
        </ul>
    </div>
    </nav>

    <div class="box">
        <div class="main-content">
            <div class="row header">
                <div id="choose-game">
                    <div id="title-banner">
                        <h1 id="title-heading">Odd One Out Game</h1>
                    </div>
                    <div id="center-menu">
                        <div id="center-menu-buttons">
                            <h3>Input your name: </h3>
                            <input id="name" class="input-fields" placeholder="Please input your name">
                            <ul id="messages"></ul>
                            <h3>Input a room code: </h3>
                            <input id="room-code" class="input-fields" placeholder="Please input your room code"></input>
                            <br><br>
                            <button id="new-game-button"  class="button-class">New Game</button>
                            <button id="join-game-button" class="button-class">Join Game</button>
                        </div>
                    </div>
                </div>
            </div>

            <div id="lobby-content">
                <div id="title-banner">
                    <h1 id="title-heading">Odd One Out Game</h1>
                </div>
                <h2>Welcome to room: </h2>
                <h1 id="room-code-header"></h1>
                
                <!-- list of players -->
                <ul id="players" class="player-list-class">
            
                </ul>
                <button id="start-game-button" class="button-class">Start Game</button>
            </div>

        <div id="game-page">
            <div id="title-banner">
                <h1 id="title-heading">Odd One Out Game</h1>
            </div>
            <div id="center-menu">
                <h2>Game</h2>
                <div id="center-menu-buttons">
                    <h3>Select a category: </h3>
                    <button id="category-game-button" class="button-class">Food Game</button>
                    <button id="category-game-button" class="button-class">Movies Game</button>
                    <button id="category-game-button" class="button-class">Sport Game</button>
                    <button id="category-game-button" class="button-class">Celebrities Game</button>
                </div>
            </div>
        </div>

        <div id="play-page">
            <div id="title-banner">
                <h1 id="title-heading">Odd One Out Game</h1>
            </div>
            <div id="center-menu">
                <h2>Get Ready</h2>
                <div id="center-menu-buttons">
                    <h3>Find out if you're the imposter or not:</h3>
                    <h1 id="player-play">PLACEHOLDER NAME</h1>
                    <button id="reveal-item-button" class="button-class">Reveal</button>
                </div>
            </div>
        </div>

       

    </div>

    <div class="middle-content">
        
        <!-- <button id="how-to-play-button">How to play</button>
        <div id="how-to-instructions">
            <ol id="instructions-list">
                <li>Gather a group of at least 3 people</li>
                <li>One player make a room and the others join</li>
                <li>One player will be an imposter</li>
                <li>The other players will be given the same item</li>
                <li>Everyone will ask a question to another player</li>
                <li>The goal is to figure out who the imposter is</li>
                <li>Everyone will vote for who they think the imposter is</li>
                <li>The imposter will be revealed to all...</li>
            </ol>
            <p id="close-instructions-text">Press this button again to close instructions</p>
        </div> -->

        <!-- <div id="chat-room">
            <h2>Chat Room</h2>
            <input id="chat-message" class="input-fields">
            <button id="send-chat-message" class="button-class">Send</button>
            <ul id="chat-messages"></ul>
        </div> -->
    </div>

    <div id="fill-space"></div>
    <div class="row content">
        
    </div>


    <div id="row footer" style="margin-bottom: 30px;">
            <div id="footer-content">
                <h3>Odd One Out Game</h3>
                <p>Created by:</p>
                <p>Group1: Ruiyang Fang, Jiaxuan He, Xiangyi Zhao, Zihan Deng, Yifei Wang, Ziqing Yin</p>
            </div>
    </div>

</div>
    
</body>

<!-- </div> -->

</html>